<template>
    <div class="system-add-role-container">
        <el-dialog title="查看发布信息" v-model="isShowDialog" width="769px">
            <div style="display: flex; flex-direction: column; align-items: center; height:300px;">
                <el-row class="rowgutter">
                    <el-col :span="4"><p style="text-align: right">发布人：</p></el-col>
                    <el-col :span="18"><span>{{ruleForm.roleName ? ruleForm.roleName : ''}}</span></el-col>
                </el-row>
                <el-row  class="rowgutter">
                    <el-col :span="4"><p style="text-align: right">发布范围：</p></el-col>
                    <el-col :span="18"><span >{{ruleForm.placContent ? ruleForm.placContent : ''}}</span></el-col>
                </el-row>
                <el-row  class="rowgutter">
                    <el-col :span="4"><p style="text-align: right">发布内容：</p></el-col>
                    <el-col :span="18"><span>{{ruleForm.content ? ruleForm.content : ''}}</span></el-col>
                </el-row>
            </div>

<!--            <el-form :model="ruleForm" size="small" label-width="90px" >-->
<!--                <el-row :gutter="35">-->
<!--                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--                        <el-form-item label="发布人">-->
<!--                            <el-input v-model="ruleForm.roleName" disabled ></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->

<!--                    </el-col>-->
<!--                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--                        <el-form-item label="发布范围">-->
<!--                            <el-select v-model="ruleForm.schoolNames" multiple filterable disabled :placeholder="placContent" style="width: 260px;">-->
<!--                                <el-option-->
<!--                                        v-for="item in menuData"-->
<!--                                        :key="item.id"-->
<!--                                        :label="item.name"-->
<!--                                        :value="item.id"-->
<!--                                />-->
<!--                            </el-select>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->

<!--                    </el-col>-->
<!--                    <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20" class="mb20">-->
<!--                        <el-form-item label="发布内容">-->

<!--                            <el-input v-model="ruleForm.content" :rows="10" type="textarea" disabled placeholder="请输入发布内容">-->
<!--                            </el-input>-->

<!--                        </el-form-item>-->
<!--                    </el-col>-->

<!--                </el-row>-->
<!--            </el-form>-->
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import { reactive, toRefs,ref } from 'vue';
    import type { ElForm } from 'element-plus';
    import { getschoolList} from '../../../api/information/index'

    export default {
        name: 'systemAddRole',
        setup(props:any, { emit }:any) {
            const state = reactive({
                isShowDialog: false,

                ruleForm: {
                    roleName:'中心端用户',
                    content:'',//内容
                    schoolIds:'',
                    status:'',
                    schoolNames:'',
                    placContent:'',
                },
                menuData: [],
                menuProps: {
                    children: 'children',
                    label: 'label',
                },
            });
            const ruleFormRef = ref<InstanceType<typeof ElForm>>();
            // 打开弹窗
            const openDialog = (row:any) => {
                console.log(row,'2222')
                getListschoole()
                state.ruleForm.placContent = row.schoolNames
                state.ruleForm.content = row.content
                ruleFormRef.value?.resetFields();
                state.isShowDialog = true;
            };
            // 关闭弹窗
            const closeDialog = () => {
                state.isShowDialog = false;
            };
            // 取消
            const onCancel = () => {
                closeDialog();
            };
            const getListschoole = () =>{
                getschoolList().then((res:any)=>{
                    state.menuData = res.data
                })
            }
            // 新增
            const onSubmit = () => {
                let schoolarr = state.ruleForm.schoolIds.join(',')
                state.ruleForm.schoolIds = schoolarr
                let params = JSON.parse(JSON.stringify(state.ruleForm))
                emit('update', params)
            };

            return {
                openDialog,
                closeDialog,
                onCancel,
                onSubmit,
                ...toRefs(state),
            };
        },
    };
</script>

<style scoped lang="scss">
    .system-add-role-container {
        .menu-data-tree {
            border: var(--el-input-border, var(--el-border-base));
            border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
            padding: 5px;
        }
    }
    .rowgutter{
        width: 80%;
        /*border-bottom: 1px solid rgb(238, 238, 238);*/
        padding-bottom: 15px;
        margin: 10px 0 20px;
    }
</style>
